<template>
    <div class="lottery-detail">
        <div class="title">中奖人：{{ value.username }}</div>
        <div class="lottery-title">
            <div class="title-item">
                <span class="people">参与人</span>
                <span class="time">参与时间</span>
            </div>
            <div class="title-item">
                <span class="people">参与人</span>
                <span class="time">参与时间</span>
            </div>
            <div class="title-item">
                <span class="people">参与人</span>
                <span class="time">参与时间</span>
            </div>
        </div>
        <div class="lottery-list">
            <div class="lottery-item" v-for="(item, index) in value.lotteryParticipant" :key="index">
                <span class="people">{{ item.username }}<span v-if="item.isRobot === 1">(机器人)</span></span>
                <span class="time">{{ item.createTime }}</span>
            </div>
        </div>
    </div>
</template>

<script>
	export default {
		name: 'LotteryDetail',
        props: {
			value: {
				type: Object,
                default: () => {
                	return {}
                }
            }
        },
	};
</script>

<style lang="scss" scoped>
.lottery-detail {
    .lottery-title {
        width: 100%;
        @include flexBox(flex-start);
        .title-item {
            width: 33.33%;
            @include flexBox(flex-start);
            .people {
                width: 50%;
                display: block;
                text-align: center;
            }
            .time {
                width: 50%;
                display: block;
                text-align: center;
            }
        }
    }
    .lottery-list {
        width: 100%;
        @include flexBox(flex-start, null, null, wrap);
        .lottery-item {
            width: 303px;
            @include flexBox(flex-start);
            .people {
                width: 50%;
                display: block;
                text-align: center;
                @include ellipsis(1);
            }
            .time {
                width: 50%;
                display: block;
                text-align: center;
            }
        }
    }
}
</style>